<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      article {
        border: 3px solid silver;
        width: 300px;
        height: 300px;
        position: relative;
        transform: perspective(900px) rotateY(54deg);
        transform-style: preserve-3d;
        transition: 1s;
      }
      div {
        background-color: slateblue;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-style: preserve-3d;
        transform: translateX(-50px) translateY(-50px) perspective(900px);
        transition: 1s;

        /* transform-origin: center; */
      }

      div:hover {
        transform: rotate(120deg);
      }
    </style>

    <article>
      <div>houdunren</div>
    </article>
  </body>
</html>
